<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <el-button @click="go" icon="el-icon-back" type="text">返回</el-button>
         <!-- <vue-aliplayer-v2 :source="src" autoplay ref="VueAliplayerV2" id="player-1194076936807170050" :options="options"/> -->
        <iframe
          :src="url"
          width="100%"
          height="650"
          id="ysOpenDevice"
          allowfullscreen
        >
        </iframe>
        <!-- <div v-if="monitorType == 2" id="lc"></div> -->
    </el-card>

    
  </div>
</template>

<script>
import VueAliplayerV2 from 'vue-aliplayer-v2';
import "../plugins/imouplay.js"

export default {
  components:{ VueAliplayerV2: VueAliplayerV2.Player },
  data() {
    return {
        // deviceSerial: this.$route.query.deviceSerial,
        // channelNo: this.$route.query.channelNo,
        // videoToken: this.$route.query.videoToken,
        // monitorType:this.$router.query.monitorType,
        options: {
            height: '80vh'
        },
        url:""
    };
  },
  mounted() {
      console.log("***********",this.$route.query)
      this.url = `https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${this.$route.query.deviceSerial}/${this.$route.query.channelNo}.live&accessToken=${this.$route.query.videoToken}&templete=2`

  },
  methods: {
    //返回
    go () {
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
.el-card__body h4 {
  margin: 10px 0px;
}
.content {
  display: flex;
  justify-content: space-around;
}
.box-card_left {
  width: 100%;
  padding: 20px;
}
.box-card_right {
  width: 60%;
  padding: 20px;
}
.spanfont {
  line-height: 32px;
  font-size: 12px;
  padding-left: 10px;
}
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 8px;
}
/deep/.el-input__inner {
  width: 250px;
}
.form_item_tiem {
  padding-bottom: 40px;
}
.el-input {
  width: 84%;
}
.el-col .el-col-8 ._button {
  text-align: center;
}
.botton_btn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.btn_left {
  margin-right: 200px;
}
.btn_right {
  margin-left: 200px;
}
.map_box {
  width: 600px;
  height: 330px;
  background: gainsboro;
  margin-top: 20px;
}
</style>
